﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Bensen- Product Landing Documentation</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
		
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
	</style>
	
	<!-- Syntax Highlighter -->
	<link rel="stylesheet" type="text/css" href="syntax-highlighter/styles/shCore.css" media="all">
	<link rel="stylesheet" type="text/css" href="syntax-highlighter/styles/shThemeDefault.css" media="all">
</head>


<body>
	<div class="container">
	
		<h3 class="center alt">&ldquo;Bensen-Product template&rdquo;  Documentation by &ldquo;dreambuzz71&rdquo; 
			v 1.0</h3>
		
		<hr>
		
		<h1 class="center">Bensen-Product Landing template</h1>
		
		 <!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#introduction">Introduction</a></li>
			<li><a href="#htmlStructure">HTML Structure</a></li>
			<li><a href="#cssFiles">CSS Files and Structure</a></li>
			<li><a href="#javascript">JavaScripts</a></li>
			<li><a href="#fontssused">Fonts used</a></li>
			<li><a href="#credits">Sources and Credits</a></li>
			<li><a href="#faq">FAQ</a></li>
		</ol>
		
		<hr>
		
		<h3 id="introduction"><strong>A) Introduction</strong> - <a href="#toc">top</a></h3>
		
		<p>Thank you so much for purchasing <strong>Bensen-Product landing template</strong>. Please feel free to contact us if you have question or problem about this template. We will do our best to provide you with the best possible assistance.</p>
		
		<h4>Template Features</h4>
		<ul>
			<li>HTML5 and CSS3 Validated</li>
			<li>Based on Twitter Bootstrap 4.4.1</li>
			<li>3 home Variation </li>
			<li>Responsive Template</li>
			<li>Clean coding</li>
			<li>FontAwesome icons</li>
			<li>Video Embeded</li>
			<li>Clean coding</li>
			<li>Css3 animation</li>
			<li>Google Web Fonts (Raleway and Poppins)</li>
		</ul>
		
		<hr>
		
		<h3 id="htmlStructure"><strong>B) HTML Structure</strong> - <a href="#toc">top</a></h3>
		
		<h4>General HTML structure</h4>
		<p>This template structure based on Twitter Bootstrap 3. Here is the sample structure.</p>
		
<pre class="brush: html">
<!-- Page Layout
================================================== -->

<!-- Header start -->
<nav class="navbar navbar-default  navbar-fixed-top">
	<div class="container">
		<div class="row">
			<div class="col-lg-12 col-md-12">
			</div>
		</div>
	</div>
</nav>
<!-- Header end -->

</pre>


		<hr>

		<h3 id="cssFiles"><strong>C) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>
		
		<h4>Styles</h4>
		
<pre class="brush: html">
 <!--====== STYLESHEETS =======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/icofont.css">
    <link rel="stylesheet" href="assets/css/modal-video.min.css">

    <!--====== OWL CAROUSEL STYLESHEETS ======-->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">

    <!--====== MAIN STYLESHEETS ======-->
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">

</pre>

		<p>All css files are separates for improving convenience to edit this template.</p>
		
		<p>Some of stylesheets contain <em>Table of content</em> for easy navigation, for instance <strong>style.css</strong>:</p>
		
<pre class="brush: css">


/* Table of Content for landing
==================================================
1.	Global Styles
2. 	Typography
3.	Common styles
4.	SECTION header 
5.	Main slider
6.	section-welcome
7.	SECTION ABOUT
8.	SECTION Feature
9.	SECTION Gallery
10. SECTION TESTIMONIAL
11.	SECTION CONTACT
12.	SECTION FOOTER

*/

</pre>

		<hr>
		
		<h3 id="javascript"><strong>D) JavaScript</strong> - <a href="#toc">top</a></h3>
		
		<p>This theme imports 11 Javascript files.</p>
		
<pre class="brush: html">

    <!--====== SCRIPTS JS ======-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>

    <!--====== PLUGINS JS ======-->

    <script src="assets/js/waypoints.min.js"></script>
    <script src="assets/js/scrollit.js"></script>
    <script src="assets/js/owl-carousel.2.3.0.min.js"></script>
    <script src="assets/js/jquery-modal-video.min.js"></script>

    <!--===== Custom ACTIVE JS=====-->
    <script src="assets/js/main.js"></script>
</pre>

	Here javascript are minified version. If you want to edit any javascript you should downlaod uncompressed version.
	If you face any difficulites to find source then please knock me to dreambuzz71@gmail.com

		<hr>
		
		
		
		<h3 id="fontssused"><strong>E) Fonts Used</strong> - <a href="#toc">top</a></h3>
		<p>I have used Poppins and Raleway in this template.</p>
		
		<ol>
			<li><em><a href="#">Poppins</a></em> - Free Web Font</li>
			<li><em><a href="#" target="_blank">Raleway</a></em> - Google Web Font</li>
		</ol><br/>
		
		
		
		<p>If you wnat to change the time of it , just open main.js file, there change the time as you want.</p>
		
		
		
		<hr>
		
		<h3 id="credits"><strong>F) Sources and Credits</strong> - <a href="#toc">top</a></h3>
		
		<ul>
			<li>Twiiter Bootstrap</li>
			<li>Owl carousel</li>
			<li>jQuery</li>
			<li>FontAwesome</li>
			<li>bootstrap Carousel</li>
			<li>Waypoint js</li>
			<li>Modal video</li>
			<li>Pexels.com</li>
		</ul>
		
		<hr>
        <h3 id="faq"><strong>g) FAQ</strong> - <a href="#toc">top</a></h3>
        <p> <strong>Video id change : </strong>If you want to change the video to play just get the last part of id of youtube video as video id and replace in the specific video section, as <pre>data-video-id="QoSGMKKqghQ"</pre></p> 
		<hr>
		
		
		<p>Once again, thank you so much for purchasing this template. I'd be glad to help you if you have any questions relating to this template. I'll do my best to assist.</p> 
		
		<p class="Productend-bottom alt large"><strong>Dreambuzz</strong>,dreambuzz71@gmail.com</p>
		<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
	</div><!-- end div .container -->
	
	
	<script type="text/javascript" src="syntax-highlighter/scripts/shCore.js"></script> 
	<script type="text/javascript" src="syntax-highlighter/scripts/shBrushXml.js"></script> 
	<script type="text/javascript" src="syntax-highlighter/scripts/shBrushCss.js"></script> 
	<script type="text/javascript" src="syntax-highlighter/scripts/shBrushJScript.js"></script> 
	<script type="text/javascript" src="syntax-highlighter/scripts/shBrushPhp.js"></script> 
	<script type="text/javascript">
    SyntaxHighlighter.all()
	</script>
</body>
</html>